<template>
  <div id="list-demo">
    <el-button type="primary">
      <SvgIcon :iconClass="'bug'"></SvgIcon>
      <div class="text">Previous Page</div>
    </el-button>
    <SvgIcon :iconClass="'404'" :width="'300px'" :height="'300px'"></SvgIcon>

    <button v-debounce="ck">看i哦i看i哦</button>
    <button v-permission="'1'">是否有权限</button>
    <el-button text @click="dialogVisible = true">click to open the Dialog</el-button>

    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      draggable
      width="30%"
      :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
    <el-input v-model="input" v-debounce="inputs" placeholder="Please input" />
  </div>
</template>
<script setup lang="ts" name="directives">
import { ref, onActivated } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
onActivated(() => {
  console.log('进来了ss')
})
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const input = ref('')
const ck = () => {
  console.log(111)
}
const inputs = () => {
  console.log(222222)
}
</script>
<style lang="scss" scoped>
#list-demo {
  display: flex;
  align-items: center;
  & .text {
    margin-left: 10px;
  }
}
.rect {
  position: absolute;
  z-index: 1000000;
}
</style>
